<template>
	<div>
		<div class="zt-main">
			<div class="zt-top-bar">
				<div 
				v-for="(item,index) in titleList" 
				:key="index"
				@click="clickTiele(index)"
				:class="['zt-bar-title',index === itemIndex ? 'active' : '']" 
				>
				<a href="javascript:" :title="item">{{ item }}</a>
				</div>
			</div>
			<div class="zt-content">
				
				<!-- 
				设置一个具名插槽 用户填写自己的内容
				
				<zt-top-bar>  这样访问即可
					<template v-slot:zt-main>
						//other DOM
					</template>
				</zt-top-bar>
				 -->
				<slot name="zt-main">
					默认内容
				</slot>
			</div>
		</div>
	</div>
	
</template>

<script>
	export default {
		data(){
			return{
				itemIndex:0
			}
		},
		/**
		 * title 由用户自己传入
		 */
		props:["titleList"],
		methods:{
			clickTiele(index){
				this.itemIndex = index
				
				//给父组件传值回去（index）
				this.$emit('ztClickItem',index)
			}
		}
	}
</script>

<style scoped="scoped">
	.zt-main{
		height: 100%;
		box-shadow: 0 0 9px #cccccc;
	}
	.zt-top-bar{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 60px;
		background: #E0FFFF;
		line-height: 60px;
	}
	.zt-bar-title{
		min-width: 80px;
		text-align: center;
	}
	.zt-bar-title a{
		text-decoration: none;
		color: #708090;
	}
	.active{
		transform: auto;
		transition: 0.5s;
		background: #ADD8E6;
		border-bottom: 2px solid #4474BB;
	}
	.active a{
		color: #4474BB;
	}
</style>
